<template>
  <div>
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar
      title="我的收藏"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push({ path: '/' })"
    >
    </van-nav-bar>
    <!-- 2.0收藏的文章 -->
    <van-swipe-cell v-for="item in list" :key="item.id">
      <Mynew :news="item"></Mynew>
      <template #right>
        <van-button square type="danger" text="删除" class="delete-btn" @click="deleteFn(item.id)" />
      </template>
    </van-swipe-cell>
    <van-empty v-if="list.length == 0" description="空空如也" />
  </div>
</template>

<script>
import { PostStarListByIdApi } from "../apis/user.js";
import { PostStarByIdsApi } from "../apis/user.js";
import Mynew from "../components/Mynew";
export default {
  methods: {
   async deleteFn(id){
        // console.log(id);
        const res = await PostStarByIdsApi(id);
        console.log(res);
        this.list = this.list.filter((item)=>item.id !=id)
    }
  },
  components: {
    Mynew,
  },
  data() {
    return {
      list: [],
    };
  },
  async created() {
    const res = await PostStarListByIdApi();
    console.log(res);
    this.list = res.data.data.map((item) => {
      return { ...item, comment_length: item.comments.length };
    });
  },
};
</script>

<style lang="less" scoped>
  .delete-btn{
    height: 100%;
  }
</style>